<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="layout/default">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>员工详情</title>
<link rel="stylesheet" th:href="@{/css/bootstrap-switch.min.css}" />
<script type="text/javascript" th:src="@{/js/bootstrap-switch.min.js}"></script>
<script>
	$(document).ready(function() {
		$('input:checkbox').bootstrapSwitch();
	});
</script>
</head>
<body>
	<div layout:fragment="content">
		<div class="row">
			<div class="col-lg-12 col-md-12 col-sm-12 xol-xs-12">
				<div class="panel panel-success">
					<div class="panel-heading">
						基本信息
						<div class="btn-toolbar pull-right hidden-print">
							<div class="btn-group btn-group-xs">
								<shiro:hasPermission name="employee:edit">
									<a class="btn btn-default"
										th:href="@{/employeese/{id}/edit(id=${employee.employeeId})}">编辑</a>
								</shiro:hasPermission>
								<shiro:hasPermission name="employee:delete">
									<a class="btn btn-danger" title="删除该员工"
										onclick="if(confirm('确定删除?')==false)return false;"
										th:href="@{/employeese/{id}/del(id=${employee.employeeId})}">删除</a>
								</shiro:hasPermission>
								<a class="btn btn-default" th:href="@{/employeese}">返回列表</a>
							</div>
						</div>
					</div>
					<div class="panel-body">
						<ul class="data-list" th:object="${employee}">
							<li><label>员工姓名</label> <span th:utext="*{employeeName}">employee_name</span></li>
							<li><label>联系电话</label> <span th:text="*{phone}">phone</span>
							</li>
							<li><label>传真号码</label> <span th:text="*{fax}">fax</span></li>
							<li><label>电子邮件</label> <span th:text="*{email}">email</span>
							</li>
							<li><label>Oracle帐号</label> <span th:text="*{oracleAccount}">oracle_account</span></li>
							<li><label>创建时间</label> <span
								th:text="*{#dates.format(createdTime, 'yyyy-MM-dd HH:mm:ss')}">created_time</span>
							</li>
							<li><label>更新时间</label> <span
								th:text="*{#dates.format(updateTime, 'yyyy-MM-dd HH:mm:ss')}">update_time</span>
							</li>
							<li><label>员工有效</label>
								<div
									class="bootstrap-switch bootstrap-switch-mini bootstrap-switch-readonly"
									data-on-text="有效" data-off-text="禁用">
									<input type="checkbox" th:field="*{available}"
										readonly="readonly" />
								</div></li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 table-responsive">
				<div class="panel panel-success">
					<div class="panel-heading">
						我的客户
						<div class="btn-toolbar pull-right hidden-print">
							<div class="btn-group btn-group-xs">
								<button class="btn btn-default" data-toggle="modal"
									data-target="#modal_dialog">添加／删除客户</button>
							</div>
						</div>
					</div>
					<div th:unless="${#lists.isEmpty(myCustomers)}"
						th:replace="customer/index::showCustomers(${myCustomers})"></div>
					<p class="text-center text-warning"
						style="padding-top: 1rem; padding-bottom: 2rem;"
						th:if="${#lists.isEmpty(myCustomers)}">
						<small>哇喔~~, 您的名下没有分配作何客户，快去主管那里认领一些吧。</small>
					</p>
				</div>
			</div>
		</div>
		
		<div class="modal fade" role="dialog" tabIndex="-1" id="modal_dialog"
            aria-labelledby="modal_label" aria-hidden="true"
            data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="modal_label">选择客户</h4>
                    </div>
                    <div class="modal-body" id="modal_content_div"
                        style="height: 360px; overflow-y: scroll">
                        <ul class="list-group">
                            <li class="list-group-item" th:each="customer: ${customers}"
                                th:object="${customer}"><label th:utext="*{accountNumber} + ' - ' + *{customerName}"></label>
                                <div class="bootstrap-switch bootstrap-switch-mini pull-right">
                                    <input type="checkbox" th:value="*{customerId}"
                                        th:checked="${#lists.contains(myCustomers, customer)}" />
                                </div></li>
                        </ul>
                    </div>
                    <div id="" class="modal-footer">
                        <button type="button" class="btn btn-default btn-sm"
                            data-dismiss="modal" title="关闭窗体，不保存操作">关闭</button>
                        <button type="button" class="btn btn-success btn-sm"
                            id="save_button" title="保存当前操作并关闭窗体">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" id="save-data-url"
            th:value="@{/employeese/{id}/customers(id=${employee.employeeId})}" />
        <script type="text/javascript">
            $("#save_button").click(
                    function() {
                        var customers = new Array();
                        $("#modal_content_div .list-group li input:checkbox")
                                .each(function() {
                                    if ($(this).prop("checked") == true) {
                                        customers.push($(this).val());
                                    }
                                });
                        $.ajax({
                            type : "post",
                            url : $("#save-data-url").val(),
                            data : JSON.stringify(customers),
                            contentType : "application/json;charset=utf-8",
                            success : function(data) {
                                window.location.reload();
                            },
                            error : function(data, s) {
                                console.log("请求错误");
                                console.log(data);
                                console.log(s);
                            }
                        });
                        $("#modal_dialog").modal("hide");
                    });
        </script>
	</div>
</body>
</html>
